import React from 'react';
import http from '../../http';
import './index.css';
import { Row, Col, Card } from 'antd';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            countList: {}
        }
    }
    count() {
        http.get('/api/manage/statistic/base_count.do').then(res => {
            this.setState({
                countList: res.data
            })
        })
    }
    componentDidMount() {
        this.count()
    }
    render() { 
        return ( 
            <div className='home'>
                <Row style={{'margin-left': '-20px','margin-right': '-20px'}}>
                    <Col span={8} style={{'padding-left': '20px','padding-right': '20px'}}>
                        <a href="/main/user">
                            <Card hoverable title="用户总数" bordered={false}>
                                <p style={{'font-size': '26px','font-weight': 'bold'}}>{this.state.countList.userCount}</p>
                            </Card>
                        </a>
                    </Col>
                    <Col span={8} style={{'padding-left': '20px','padding-right': '20px'}}>
                        <a href="/main/shop">
                            <Card hoverable title="商品总数" bordered={false}>
                                <p style={{'font-size': '26px','font-weight': 'bold'}}>{this.state.countList.productCount}</p>
                            </Card>
                        </a>
                    </Col>
                    <Col span={8} style={{'padding-left': '20px','padding-right': '20px'}}>
                        <a href="/main/order">
                            <Card hoverable title="订单数" bordered={false}>
                                <p style={{'font-size': '26px','font-weight': 'bold'}}>{this.state.countList.orderCount}</p>
                            </Card>
                        </a>
                    </Col>
                </Row>
            </div>
        );
    }
}
 
export default Home;